@import "../../core/color.scss";
@import "../../core/function.scss";

.re-app-ring{
  width:100px;
  height:100px;
  position:relative;
}
.re-ring-pie {
  position:absolute;
  width:100%;
  height:100%;
  box-sizing:border-box;
  background-color:$eee;
  border-radius:50%;
}
.re-ring-pie1 {
  clip:rect(0px 100px 100px 50px);
  transition-property:transform;
  transition-duration:0.3s;
  transition-timing-function:linear;
}
.re-ring-pie2 {
  clip:rect(0px 50px 100px 0px);
  transition-property:transform;
  transition-delay:0.3s;
  transition-duration:0.3s;
  transition-timing-function:linear;
}
.re-ring-hold {
  position:absolute;
  width:100%;
  height:100%;
  z-index:1;
}
.re-ring-hold1 { clip:rect(0px 100px 100px 50px); }
.re-ring-hold2 { clip:rect(0px 50px 100px 0px); }
.re-ring-bg {
  width:100%;
  height:100%;
  box-sizing:border-box;
  border:1px solid $white;
  background-color:#009bf7;
  border-radius:50%;
  position:absolute;
}
.re-ring-cover{
  position:relative;
  width:80px;
  height:80px;
  top:10px;
  left:10px;
  background-color:white;
  border-radius:50%;
  z-index:10;
  text-align:center;
  color:#4D5874;
  .re-top-word{
    padding-top:20%;
  }
}